import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test1 from './pages/Test1'
import Test2 from './pages/Test2'
// Routes用来包裹Route.并帮我们监听浏览器地址栏的变化
// Route 用来定义前端路由规则: 路径和组件的一一对应规则
// Link的作用: 帮我们渲染一个a标签,让用户可以点击.并且点击了之后,只会修改路径,不会发送请求
export default function App() {
  return (
    <div>
      <Link to="/home">首页</Link> &nbsp;&nbsp;
      <Link to="/login">登录页</Link>
      <hr />
      {/* 定义前端路由规则 */}
      <Routes>
        {/* 配置前端路由规则时,path中的斜杠可以忽略 */}
        {/* <Route path="home" element={<Home></Home>}></Route>
        <Route path="login" element={<Login></Login>}></Route> */}
        {/* Route中嵌套了Route之后的特点: 外层Route的path会和内部Route的path进行拼接 */}
        {/* <Route path="">
          <Route path="login" element={<Login></Login>}></Route>
        </Route> */}
        {/* <Route path="login">
          <Route path="" element={<Login></Login>}></Route>
        </Route> */}
        {/* 嵌套路由  */}
        {/* 如果是一级路由组件渲染的位置又Route的位置决定.如果是嵌套路由组件是由Outlet组件决定位置 */}
        {/* 简写 */}
        {/* <Route path="home" element={<Home></Home>}>
          <Route path="test1" element={<Test1></Test1>}></Route>
          <Route path="test2" element={<Test2></Test2>}></Route>
        </Route>
        <Route path="login" element={<Login></Login>}></Route> */}

        {/* 非简写 */}
        <Route path="/home" element={<Home></Home>}>
          {/* 注意: 嵌套路由组件的路径必须以上一级的路径开头 */}
          <Route path="/home/test1" element={<Test1></Test1>}></Route>
          <Route path="/home/test2" element={<Test2></Test2>}></Route>
        </Route>
        <Route path="/login" element={<Login></Login>}></Route>
      </Routes>
    </div>
  )
}
